<template>
    <!-- 文章详情 -->
    <div class="content">
        <h1 class="title tracking-in-expand">
            <slot name="title"></slot>
            <hr />
        </h1>
        <!-- 解析markdown -->
        <!-- <vue-markdown
      v-if="item.textType == 0"
      class="markdown-body"
      :source="item.articleContent"
    ></vue-markdown> -->
        <!-- 使用 mavon-renderer 渲染 Markdown -->
        <mavon-editor
            style="padding: 0.5rem 0"
            v-if="item.textType === 0"
            :value="item.articleContent"
            :subfield="false"
            defaultOpen="preview"
            :toolbarsFlag="false"
            :editable="false"
            class="custom-editor"
        ></mavon-editor>
        <!-- 解析html -->
        <div
            v-if="item.textType === 1"
            v-html="item.articleContent"
            v-highlight
        ></div>
    </div>
</template>
<script>
import { mixin } from "@/mixins";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
    components: {
        mavonEditor,
    },
    name: "article-content",
    mixins: [mixin],
    props: ["item"],
};
</script>

<style lang="scss" scoped>
@use "../assets/css/article-content.scss";
</style>
